<template>
	<view class="my-page" :style="{'padding-top': navHeight}">
		<view class="header">
			<u-row>
				<u-col span="2.5">
					<image class="avatar" v-if="userInfo&&userInfo.avatar" :src="userInfo.avatar" mode="aspectFit"></image>
				</u-col>
				<u-col span="4">
					<view v-if="userInfo" class="header-left">{{userInfo.name||""}}</view>
				</u-col>
				<u-col span="5" textAlign="right" @click="handleToInfo">
					<view class="header-right">个人信息</view>
				</u-col>
				<u-col span="0.5" @click="handleToInfo">
					<u-icon name="arrow-right" color="white" size="15"></u-icon>
				</u-col>
			</u-row>
		</view>
		<view class="menu snowy-shadow">
			<u-row @click="gotoFastNav">
				<u-col span="1">
					<u-icon name="pushpin-fill" color="#fa3534" size="20"></u-icon>
				</u-col>
				<u-col span="10.5">
					<view class="menu-left">快捷设置</view>
				</u-col>
				<u-col span="0.5">
					<u-icon name="arrow-right" color="#2979ff" size="15"></u-icon>
				</u-col>
			</u-row>
		</view>
		<view class="menu snowy-shadow">
			<u-row @click="handleToPwd">
				<u-col span="1">
					<u-icon name="lock-fill" color="#fa3534" size="20"></u-icon>
				</u-col>
				<u-col span="10.5">
					<view class="menu-left">修改密码</view>
				</u-col>
				<u-col span="0.5">
					<u-icon name="arrow-right" color="#2979ff" size="15"></u-icon>
				</u-col>
			</u-row>
		</view>
		<view class="menu snowy-shadow">
			<u-row @click="handleLogout">
				<u-col span="1">
					<u-icon name="warning-fill" color="#ff9900" size="20"></u-icon>
				</u-col>
				<u-col span="10.5">
					<view class="menu-left">退出登录</view>
				</u-col>
				<u-col span="0.5">
					<u-icon name="arrow-right" color="#2979ff" size="15"></u-icon>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	let that = null
	import config from '@/config'
	export default{
		data() {
			return {
				
			}
		},
		onLoad() {
			that = this
		},
		onShow() {
			
		},
		computed: {
			...mapState({
				sysBaseConfig: state => state.global.sysBaseConfig,
				tenantInfo: state => state.global.tenantInfo,
				userInfo: state => state.global.userInfo,
			}),
		},
		methods: {
			...mapActions(['Login', 'LogOut', 'GetUserLoginMenu', 'GetUserInfo', 'GetDictTypeTreeData']),
			gotoFastNav(){
				uni.navigateTo({
					url: '/pages/tabList/mine/fastNav/index'
				})
			},
			
			handleToInfo(){
				uni.navigateTo({
					url: '/pages/tabList/mine/info/index'
				})
			},
			handleToEditInfo(){
				uni.navigateTo({
					url: '/pages/tabList/mine/info/edit'
				})
			},
			handleToPwd(){
				uni.navigateTo({
					url: '/pages/tabList/mine/pwd/index'
				})
			},
			handleLogout(){
				uni.$snowy.modal.confirm('确定注销并退出系统吗？').then(() => {
					// 退出
					that.LogOut().then(() => {
						uni.$snowy.tab.reLaunch(config.NO_TOKEN_BACK_URL)
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin circular {
		width: 120upx;
		height: 120upx;
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
	}

	.header {
		background: #5677fc;
		margin-bottom: 15rpx;
		padding: 140rpx 25rpx 90rpx 25rpx;
		border-radius: 0 0 15rpx 15rpx;

		.avatar {
			@include circular;
			border: 4upx solid #eaeaea;
		}

		.header-left {
			color: white;
			font-size: 40upx;
			line-height: 40upx;
		}

		.header-right {
			color: white;
			font-size: 28rpx;
		}
	}

	.grid {
		background: white;
		margin-bottom: 15rpx;
		padding: 10rpx 10rpx;
		border-radius: 15rpx;
	}

	.menu {
		background: #ffffff;
		margin-bottom: 15rpx;
		padding: 25rpx;
		border-radius: 15rpx;
		width: 714rpx;
		margin-left: 18rpx;
		box-sizing: border-box;
		.menu-left {
			font-size: 30rpx;
		}

		.menu-right {
			font-size: 28rpx;
		}
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;

		.text {
			text-align: center;
			font-size: 26rpx;
			margin-top: 15rpx;
		}
	}
</style>
